<template>
	<view class="sroreLayout pageBg">
		<add-nav-bar title="仓库新增" ></add-nav-bar>
		
		
		<view class="form-container">
			<wd-form ref="form" :model="editForm" class="form">
			  <wd-cell-group border custom-class="form-bg">
					

					
					<wd-input
					  label="门店"
					  :label-width="labelWidth"
					  v-model="editForm.storeId"
					  placeholder="请选择库位"
						readonly
					/>
					
					<wd-input
					  label="录入单号"
					 :label-width="labelWidth"
					  v-model="editForm.lrBill"
					  placeholder="请选择录入单号"
						readonly
					/>
					
					<wd-input type="text" :label-width="labelWidth"    v-model="editForm.lrBill" use-label-slot >
						<template #label>
							
						 <wd-tooltip placement="right" content="商品库位" prop="whsId" :rules="[{ required: true, message: '请选择库位' }]" >
							   <view class="label-word">
							   	<view>库位</view>
							   	<view class="wordIcon"> !</view>
							   </view>
						</wd-tooltip>
								
							
						</template>
						
						<template #suffix>
							<wd-icon name="search" size="15px" color="#666" @click="handleInput"></wd-icon>
						</template>
					</wd-input>
					
					
			    <wd-input
			      label="库位"
			      :label-width="labelWidth"
			      prop="whsId"
			      v-model="editForm.whsId"
			      placeholder="请选择库位"
			      :rules="[{ required: true, message: '请选择库位' }]"
			    />
			    <wd-input
			      label="柜组"
			      :label-width="labelWidth"
			      prop="jybz"
			      v-model="editForm.jybz"
			      placeholder="请选择柜组"
			      :rules="[{ required: true, message: '请选择柜组' }]"
			    />
			  </wd-cell-group>
			  <view class="footer">
			    <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
			  </view>
			</wd-form>
		</view>
		
		
	</view>
</template>

<script setup>
	import {onLoad,onReady,onShow,onHide,onUnload,onPageScroll} from "@dcloudio/uni-app"
	
	import { ref,reactive,computed,onMounted} from 'vue';
	
	let editForm = reactive({
		bill: "",
		comm: "",
		jybz: "",
		jybzName: "",
		lrBill: "自动生成",
		storeId: "全福元健康街店",
		storeName: "",
		whsId: "",
		whsIdName: "",
	})
	const form = ref()
	const labelWidth = reactive('100px')
	
	const handleSubmit = ()=>{
		form.value
		    .validate()
		    .then(({ valid, errors }) => {
		      if (valid) {
		        showSuccess({
		          msg: '校验通过'
		        })
		      }
		    })
		    .catch((error) => {
		      console.log(error, 'error')
		    })
	}
	
	
	const handleInput =()=>{
	 console.log("2")
	}
	
	onLoad((e)=>{	
		console.log("onload函数");
		let data = JSON.parse(e.id)
		console.log("1111111111111")
		console.log(data)
	})
	
	
</script>

<style lang="scss" scoped>
.form-container{
	padding: 20rpx;	
	border-radius: 10px;
	overflow: hidden;
}

.form-bg{
	border-radius:10px;
	overflow: hidden;
}

.footer{
	margin-top: 20px;
}




.label-word{
	display: flex;
	align-items: center;
	.wordIcon{
		// margin-top: 8px;
		width:30rpx;
		height:30rpx;
		background-color: #000;
		color: #fff;
		font-size: 14px;
		transform: scale(0.9); /* 然后缩小至80% */
		transform-origin: 0 0; /* 可能需要指定缩放原点以确保准确缩放 */
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left:5px;
	}
}


</style>